﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>main</title>

    <script src="/js/navigator.js"></script>
    <link href="main.css" rel="stylesheet" />
    <script src="main.js"></script>

    <script id="DT_PreviewList" type="text/template">
        {each entry as item index}
        <div class='timeline-item' data-cmd='view-detail' data-qid='{item.id}' data-pdate='{item.published}'>
            <div class='title' data-cmd='view-detail' data-qid='{item.id}' data-pdate='{item.published}'>{echo item.title}</div>
            {if item.author && item.author.avatar}
             <img src='{echo item.author.avatar}' data-cmd='view-blogger' data-blogid='{item.blogapp}' data-author='{item.author.name}' data-avatar='{item.author.avatar}'/>
            {/if}
            <div class='summary' data-cmd='view-detail' data-qid='{item.id}' data-pdate='{item.published}'>{echo item.summary}</div>
        </div>
        {/each}
    </script>
    <script id="DT_NewsList" type="text/template">
        {each entry as item index}
        <div class='timeline-item'>
            
        </div>
        {/each}
    </script>
    <script id="DT_Blogger" type="text/template">
        {each entry as item index}
        <div class='timeline-item blogger-item'>
            {if item.avatar}
            <img src='{item.avatar}' data-cmd='view-blogger' data-blogid='{item.blogapp}' data-author='{item.title}' data-avatar='{item.avatar}'/>
            {/if}
            <h3 data-cmd='view-blogger' data-blogid='{item.blogapp}' data-author='{item.title}' data-avatar='{item.avatar}'>{echo item.title}</h3>
            <span data-cmd='view-blogger' data-blogid='{item.blogapp}' data-author='{item.title}' data-avatar='{item.avatar}'>{echo item.postcount} 篇博客</span>
        </div>
        {/each}
    </script>
</head>
<body>
    <div id="mainframe">
        <section id="section-menu">
            <h3>博客园</h3>
            <ul id="id_menu" class="menu">
                <li class="menu-current"><a href="#blog_home">首页精华</a></li>
                <li><a href="#blog_foureight">48小时阅读排行</a></li>
                <li><a href="#blog_ten">10天内推荐排行</a></li>
                <li><a href="#blog_recommend">推荐博客</a></li>
                <li>
                    <p>新闻</p>
                </li>
                <li><a href="#news_recent">最新新闻</a></li>
                <li><a href="#news_hot">热门新闻</a></li>
                <li><a href="#news_recommend">推荐新闻</a></li>
            </ul>
        </section>
        <section id="section-blogger" style="display: none">
            <div class="win-header">
                <button class="win-backbutton" type="button" id="blogger_back"></button>
                <div class="win-label">返回菜单</div>
            </div>
            <img src="#" alt="" id="blogger_avater"><br />
            <div id="blogger_author"></div>
        </section>

        <section id="section-list">

            <div id="to-top-floater" data-role="floater" style="display: none"><span class="to-top"></span></div>
            <div id="mainlist" data-role="mainlist"></div>
            <progress id="progressBar" class="win-ring win-large progressRing" style="display: none" />
        </section>

        <section id="section-detail">
            <div>
                <button id="detail-share" value="share"></button>
                <h3 id="detail-title"></h3>
                <p id="detail-author"></p>
            </div>
            <div id="detail-content"></div>
            <div id="detail-comments"></div>
        </section>
    </div>

    <div data-win-control="WinJS.UI.AppBar" style="width: 100%">
        <button id="appbar_refresh" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'refresh',label:'刷新','section':'selection'}"></button>
    </div>

</body>
</html>
